<template>
    <div class="DL-container">
        <div class="DL-loading">
            <span style="--i:1;"></span>
            <span style="--i:2;"></span>
            <span style="--i:3;"></span>
            <span style="--i:4;"></span>
            <span style="--i:5;"></span>
            <span style="--i:6;"></span>
            <span style="--i:7;"></span>
            <span style="--i:8;"></span>
            <span style="--i:9;"></span>
            <span style="--i:10;"></span>
            <span style="--i:11;"></span>
            <span style="--i:12;"></span>
            <span style="--i:13;"></span>
            <span style="--i:14;"></span>
            <span style="--i:15;"></span>
            <span style="--i:16;"></span>
            <span style="--i:17;"></span>
            <span style="--i:18;"></span>
            <span style="--i:19;"></span>
            <span style="--i:20;"></span>
        </div>
    </div>
</template>

<script>

export default {
    name: "DominoLoading",
    components: {},
    data() {
        return {
        }
    },
    computed: {},
    methods: {

    },
    mounted() {
    }
}
</script>

<style scoped>
.DL-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.DL-loading {
    position: relative;
    display: flex;
    gap: 15px;
}

.DL-loading>span {
    position: relative;
    width: 5px;
    height: 20px;
}

.DL-loading>span::before {
    content: "";
    position: absolute;
    inset: 0;
    animation: loading 8s linear infinite;
    animation-delay: calc(var(--i) * 0.1s);
}

@keyframes loading {
    0% {
        background-color: #0f0;
        box-shadow: 0 0 5px #0f0, 0 0 15px #0f0, 0 0 30px #0f0, 0 0 50px #0f0;
        rotate: 0deg;
    }
    20% {
        background-color: #0f0;
        box-shadow: 0 0 5px #0f0, 0 0 15px #0f0, 0 0 30px #0f0, 0 0 50px #0f0;
        rotate: 0deg;
    }
    40% {
        background-color: #0f0;
        box-shadow: 0 0 5px #0f0, 0 0 15px #0f0, 0 0 30px #0f0, 0 0 50px #0f0;
        rotate: 90deg;
        transform-origin: bottom;
        filter: hue-rotate(0deg);
    }
    80% {
        background-color: #0f0;
        box-shadow: 0 0 5px #0f0, 0 0 15px #0f0, 0 0 30px #0f0, 0 0 50px #0f0;
        rotate: 90deg;
        transform-origin: bottom;
        filter: hue-rotate(360deg);
    }
    90% {
       background-color: #000;
       box-shadow: none;
       rotate: 0deg;
    }
    90.1%,100% {
        background-color: #000;
       box-shadow: none;
    }
}
</style>